import { t } from 'i18next'

import { IconApprove, IconReject, Wrap } from './style'
import { HelperTop } from '../../components/HelperTop'
import { ITab, InnerApplyMsgItem } from '../../interface'
import { useMccStore } from '@/pages/manager/store'
import { useEffect } from 'react'
import { useRequest } from 'ahooks'
import { useMsgStore } from '../../store'
import { fetchApplyMsg, fetchApplyOperate } from '@/api/manager/helper'
import dayjs from '@/plugins/dayjs'
import Alert from '@/components/Alert'
import { Avatar } from '@/pages/manager/components'
import { Mt } from '@/api/manager/mt'

export const Apply = () => {
	const meetingMoid = useMccStore((state) => state.mccInfo.meetingMoid)
	const { update, innerApplyList } = useMsgStore((state) => ({
		update: state.update,
		innerApplyList: state.innerApplyList,
	}))
	const { loading, data } = useRequest(() => fetchApplyMsg(meetingMoid, { state: 1 }))
	useEffect(() => {
		if (!loading && data) {
			update({ innerApplyList: data.map((i) => ({ ...i, done: false })) })
		}
	}, [loading, data])

	const handleClickTopTab = (tab: ITab) => {
		update({ tab: undefined })
		setTimeout(() => {
			update({ tab: tab })
		})
	}

	const handleApprove = (item: InnerApplyMsgItem) => {
		fetchApplyOperate(meetingMoid, item.operation_user?.mt_id || item.operation_user?.account || '', item.id, {
			state: 2,
		}).then((res) => {
			if (res.success) {
				let newList: InnerApplyMsgItem[] = innerApplyList.map((i) =>
					i.id === item.id ? { ...i, state: 2, done: true } : i
				)
				update({ innerApplyList: newList })
				deleteMsg(item.id)
			} else {
				//删除该条申请
				let newList: InnerApplyMsgItem[] = innerApplyList.filter((i) => i.id !== item.id)
				update({ innerApplyList: newList })
				Alert(res.description)
			}
		})
	}
	const handleReject = (item: InnerApplyMsgItem) => {
		fetchApplyOperate(meetingMoid, item.operation_user?.mt_id || item.operation_user?.account || '', item.id, {
			state: 3,
		}).then((res) => {
			if (res.success) {
				let newList: InnerApplyMsgItem[] = innerApplyList.map((i) =>
					i.id === item.id ? { ...i, state: 3, done: true } : i
				)
				update({ innerApplyList: newList })
				deleteMsg(item.id)
			} else {
				//删除该条申请
				let newList: InnerApplyMsgItem[] = innerApplyList.filter((i) => i.id !== item.id)
				update({ innerApplyList: newList })
				Alert(res.description)
			}
		})
	}

	const deleteMsg = (id: string) => {
		//处理过的消息过一段时间消失
		setTimeout(() => {
			let newList = useMsgStore.getState().innerApplyList.filter((item) => item.id !== id)
			update({ innerApplyList: newList })
		}, 3000)
	}

	const getApplyTypeDesc = (type: string) => {
		let desc = ''
		switch (type) {
			case 'mcc_sysmsg_mt_apply_cancel_mute':
			case 'mcc_sysmsg_mtapplymix':
				desc = '申请发言'
				break
			case 'mcc_sysmsg_mtapplyspeaker':
				desc = '申请成为发言方'
				break
		}
		return desc
	}
	return (
		<Wrap>
			<HelperTop onClickTopTab={handleClickTopTab}>
				{loading
					? ''
					: innerApplyList.length === 0
					? t('暂无终端申请需要审批')
					: t('有{{num}}条终端申请需要审批', { num: innerApplyList.length })}
			</HelperTop>
			{!loading && (
				<ul>
					{innerApplyList.map((x, i) => (
						<li key={i}>
							<span className="avatar">
								<Avatar value={new Mt(x.operation_user)} />
							</span>
							<div className="info">
								<div className="name">{x.operation_user?.name}</div>
								<div className="detail">
									<span className="time">{dayjs(x.created_at).format('HH:mm')}</span>
									<span className="desc">{getApplyTypeDesc(x.type)}</span>
								</div>
							</div>
							<div className="operations">
								{x.state === 1 && (
									<>
										<IconApprove
											className="approve-btn"
											onClick={() => handleApprove(x)}
										></IconApprove>
										<IconReject className="reject-btn" onClick={() => handleReject(x)}></IconReject>
									</>
								)}
								{x.state === 2 && <span className="approve">已同意</span>}
								{x.state === 3 && <span className="reject">已拒绝</span>}
							</div>
						</li>
					))}
				</ul>
			)}
		</Wrap>
	)
}
